Skip to content

feat(panel): theme selector (System / Light / Dark) with persistence#232

Merged
upsetbit merged 1 commit into
masterfrom
feat/225-theme-selector
Jun 7, 2026
Merged

feat(panel): theme selector (System / Light / Dark) with persistence#232
upsetbit merged 1 commit into
masterfrom
feat/225-theme-selector

Conversation

@upsetbit

@upsetbit upsetbit commented Jun 7, 2026

Copy link
Copy Markdown
Contributor

Summary

Adds Light + System palette variants alongside the historical Dark default, plus a Settings → Appearance picker that persists via `localStorage`.

  • `tokens.css` gains `[data-theme="light"]` overrides and a `@media (prefers-color-scheme: light)` block for `[data-theme="system"]` — every component already pulls from the same vars so the swap is global.
  • `base.html` injects a tiny inline `<script>` in `` before stylesheets to set `documentElement.dataset.theme` from localStorage. No FOUC.
  • `settings.html` grows an Appearance section: three pill cards in an Alpine radiogroup. Choosing one writes `localStorage` and updates `documentElement.dataset.theme` immediately; no server round trip.
  • New `internal/panel/assets/css/components/settings.css` with `.settings-card` + `.theme-options` chrome.

Closes #225.

Test plan

  • `just build && ./bin/prosa-panel` with `PROSA_PANEL_DEV_LOGIN=1`.
  • Open `/settings` — three theme options visible; Dark is highlighted (default).
  • Click Light → palette inverts immediately across every page.
  • Reload → Light persists; no flash of dark on first paint.
  • Click System; toggle macOS Appearance to Light → panel follows.
  • `localStorage.removeItem("prosa-theme")` + reload → falls back to Dark cleanly.

🤖 Generated with Claude Code


View with Codesmith Autofix with Codesmith
Need help on this PR? Tag /codesmith with what you need. Autofix is disabled.

Adds Light + System palette variants alongside the historical dark
default. Tokens.css gains [data-theme="light"] overrides and a
prefers-color-scheme-driven block for [data-theme="system"]; every
component already pulls from the same vars so the swap is global.

base.html injects a tiny inline <script> in <head> before stylesheets
to set documentElement.dataset.theme from localStorage — no FOUC.

settings.html grows an Appearance section: three pill cards
(System / Light / Dark) in an Alpine radiogroup. Changing the
selection writes localStorage and updates documentElement.dataset.theme
immediately; no server round trip.

Persistence is per-browser via localStorage. Defaults to dark.

Closes #225

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@upsetbit upsetbit merged commit e9d5d52 into master Jun 7, 2026
5 checks passed
@upsetbit upsetbit deleted the feat/225-theme-selector branch June 8, 2026 04:41
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Settings: theme selector (System / Light / Dark) with persistence

1 participant